<template>
	<view class="container">

		<view class="banner">
			<image :src="'https://elderlycomm.oss-cn-chengdu.aliyuncs.com/static/banner.jpg'"></image>
		</view>


		<view class="tools">
			<view class="row">
				<view class="small ball" @click="showPopup(0)">
					<view class="title">
						约个球
					</view>
				</view>
				<view class="small chess" @click="showPopup(1)">
					<view class="title">
						来局棋
					</view>
				</view>
			</view>

			<view class="row">
				<view class="large dance" @click="showPopup(2)">
					<view class="title">
						跳个广场舞
					</view>
				</view>
			</view>

			<view class="row">
				<view class="small TaiJi" @click="showPopup(3)">
					<view class="title">
						太极
					</view>
				</view>
				<view class="small dine" @click="showPopup(4)">
					<view class="title">
						聚餐
					</view>
				</view>
			</view>
		</view>

		<view>
			<uni-popup ref="popup" background-color="white" type="bottom">
				<view class="popup">
					<view class="close" @click="$refs.popup.close()"> 关闭 </view>
					<view class="mySelf">
						<view class="myPublish" @click="myPublishActive">我发布的活动</view>
						<view class="myReceiveActive" @click="myReceiveActive(themeId)">我接收的活动</view>
					</view>
					<view class="community">
						<view class="publish" @click="PublishDetail(themeId)">发布社区活动</view>
						<view class="showActive" @click="showActives(themeId)">查看社区活动</view>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
import {
	mapState
} from 'vuex'
export default {
	data() {
		return {
			activeList: [['约个球', '来局棋'], '跳个广场舞', ['健康快走', '约个球']],
			themeId: ''
		};
	},
	methods: {
		myPublishActive() {
			uni.navigateTo({
				url: "./myPublishActive/myPublishActive",
			})
		},
		myReceiveActive(themeId) {
			uni.navigateTo({
				url: "./myReceiveActive/myReceiveActive?themeId=" + themeId,
			})
		},
		PublishDetail(themeId) {
			uni.navigateTo({
				url: "./publish/publish?themeId=" + themeId,
			})
		},
		showActives(themeId) {
			uni.navigateTo({
				url: "./showActives/showActives?themeId=" + themeId,
			})
		},
		showPopup(themeId) {
			this.themeId = themeId
			this.$refs.popup.open()
		},

		// 获取社区信息
		async getCommunity() {
			console.log(this.location);
			let query = {
				y: this.location.longitude,
				x: this.location.latitude
			}
			// const { data } = await uni.$http.post('/community/getCommunity', query)
		}
	},
	computed: {
		...mapState('weather', ['location']),
	},
	onShow() {
		this.getCommunity()
	}
}
</script>

<style lang="less" scoped>
.container {
	background-color: #f3efef;
}

.banner {
	image {
		height: 200rpx;
		width: 100%;
	}
}

.tools {
	display: flex;
	flex-flow: column wrap;
	justify-content: space-between;
	padding: 20rpx;
	align-items: center;

	.row {
		width: 100%;
		display: flex;
		justify-content: space-between;
		padding-bottom: 50rpx;

		.dance {
			background: url('https://elderlycomm.oss-cn-chengdu.aliyuncs.com/old/z6.jpg');
			background-size: 100% 100%;

		}

		.TaiJi {
			background: url('https://elderlycomm.oss-cn-chengdu.aliyuncs.com/old/z15.jpg');
			background-size: 100% 100%;

			.title {
				color: black;
			}
		}

		.dine {
			background: url('https://elderlycomm.oss-cn-chengdu.aliyuncs.com/old/z12.jpeg');
			background-size: 100% 100%;

			.title {
				color: black;
			}
		}

		.ball {
			background: url('https://elderlycomm.oss-cn-chengdu.aliyuncs.com/oldhome/image/ball.jpg');
			background-size: 100% 100%;

			.title {
				color: white;
			}
		}

		.chess {
			background: url('https://elderlycomm.oss-cn-chengdu.aliyuncs.com/oldhome/image/chess.jpg');
			background-size: 100% 100%;
		}

		.title {
			color: #FF6F3C;
			font-size: 55rpx;
			font-weight: 700;
		}
	}
}

.popup {
	height: 70vh;
	display: flex;
	flex-flow: column;
	justify-content: space-evenly;
	align-items: center;
	position: relative;

	.close {
		position: absolute;
		top: 5rpx;
		right: 5rpx;
		background-color: rgb(228, 16, 16);
		color: white;
		font-size: 35rpx;
		font-weight: 700;
		padding: 10rpx;
		border-radius: 5rpx;

	}

	.mySelf,
	.community {
		width: 100%;
		display: flex;
		justify-content: space-evenly;
	}

	.publish,
	.myPublish,
	.showActive,
	.myReceiveActive {
		width: 300rpx;
		height: 300rpx;
		text-align: center;
		background: url('https://elderlycomm.oss-cn-chengdu.aliyuncs.com/old/z3.jpg');
		border: 5px solid #ccc;
		background-size: 100% 100%;
		font-size: 45rpx;
		font-weight: 700;
		color: orangered;
		border-radius: 30rpx;

	}

	.showActive,
	.publish {
		background: url('https://elderlycomm.oss-cn-chengdu.aliyuncs.com/old/z5.jpg');
		background-size: 100% 100%;
	}
}
</style>
